<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()">
			<el-row>
				<el-col :span="10">
					<!-- <el-form-item label="模板截图" prop="templateImg">
						<el-input v-model="dataForm.templateImg" placeholder="模板截图"></el-input>
					</el-form-item> -->
					<el-form-item label="模板截图" prop="templateImg">
						<el-upload
							class="avatar-uploader"
							:action="fileUploadUrl"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
						>
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="14">
					<!-- <el-form-item label="id" prop="id">
						<el-input v-model="dataForm.id" placeholder="id"></el-input>
					</el-form-item>
					<el-form-item label="上级ID" prop="pid">
						<el-input v-model="dataForm.pid" placeholder="上级ID"></el-input>
					</el-form-item> -->
					<el-form-item label="模板名称" prop="templateName">
						<el-input v-model="dataForm.templateName" placeholder="模板名称"></el-input>
					</el-form-item>
					<el-form-item prop="pid" label="上级模板">
						<ma-template-select v-model="dataForm.pid" placeholder="请选择"></ma-template-select>
					</el-form-item>

					<!-- <el-form-item label="模板压缩包文件" prop="templateZip">
						<el-input v-model="dataForm.templateZip" placeholder="模板压缩包文件"></el-input>
					</el-form-item> -->
					<el-form-item label="版本号" prop="version">
						<!-- <el-input v-model="dataForm.version" placeholder="版本号"></el-input> -->
						<el-input-number v-model="dataForm.version" :min="1" :max="10" />
					</el-form-item>
					<!-- <el-form-item label="模板压缩包路径" prop="templatePath">
						<el-input v-model="dataForm.templatePath" placeholder="模板压缩包路径"></el-input>
					</el-form-item>
					<el-form-item label="创建时间" prop="createTime">
						<el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
					</el-form-item>
					 -->
				</el-col>
			</el-row>
			<!-- <el-row>
				<el-col :span="10">
					<el-form-item label="模板描述MD" prop="readmeFile">
						<el-input v-model="dataForm.readmeFile" placeholder="模板描述MD"></el-input>
					</el-form-item>
					<el-form-item label="模板描述MD" prop="readmeContent">
						<el-input v-model="dataForm.readmeContent" placeholder="模板描述MD"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="14"> </el-col>
			</el-row> -->
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
// import MaTemplateInput from '@/components/ma-template/ma-template-input/index.vue'
import MaTemplateSelect from '@/components/ma-template/ma-template-select/index.vue'
import { useGen_template_treeApi, useGen_template_treeSubmitApi } from '@/api/genTemplateTree'

import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'

const PUBLIC_URL = import.meta.env.VITE_API_URL
const imageUrl = ref('')

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()

const dataForm = reactive({
	id: '',
	pid: '',
	templateName: '',
	parentName: '',
	templateImg: '',
	//readmeFile: '',
	readmeContent: '',
	templateZip: '',
	version: 0
	//templatePath: '',
	//createTime: '',
})

const init = (isUpdate: boolean, row: any) => {
	visible.value = true

	// 重置表单数据
	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
		imageUrl.value = ''
	}

	// 更新表单数据
	if (row) {
		getGen_template_tree(isUpdate, row)
	} else {
		dataForm.id = ''
		dataForm.pid = ''
		dataForm.parentName = ''
		dataForm.templateName = ''
		dataForm.templateImg = ''
		//dataForm.readmeFile = ''
		dataForm.readmeContent = ''
		//;(dataForm.templateZip = ''), (dataForm.templatePath = '')
		//dataForm.createTime = ''
		dataForm.version = 0
	}
}

const getGen_template_tree = (isUpdate: boolean, row: any) => {
	Object.assign(dataForm, row)
	if (!isUpdate) {
		// 是新增，重置表单数据
		dataForm.pid = dataForm.id
		dataForm.parentName = dataForm.parentName
		dataForm.id = ''
		dataForm.templateName = ''
		dataForm.templateImg = ''
		// dataForm.readmeFile = ''
		dataForm.readmeContent = ''
		// ;(dataForm.templateZip = ''), (dataForm.templatePath = '')
		// dataForm.createTime = ''
		// dataForm.version = ''
	} else {
		imageUrl.value = PUBLIC_URL + dataForm.templateImg
	}
}

const dataRules = ref({
	templateName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		useGen_template_treeSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

const fileUploadUrl = PUBLIC_URL + '/gen/fileUpDownLoad/uploadFile/IMAGE'

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
	// imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	// console.log(response.data)
	dataForm.templateImg = response.data
	imageUrl.value = PUBLIC_URL + dataForm.templateImg
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
	if (rawFile.type !== 'image/jpeg') {
		ElMessage.error('Avatar picture must be JPG format!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!')
		return false
	}
	return true
}

defineExpose({
	init
})
</script>
<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.file-uploader {
	width: 300px;
	height: 200px;
	display: block;
}
</style>

<style lang="scss">
.el-row {
	margin-bottom: 20px;
}
.el-row:last-child {
	margin-bottom: 0;
}
.el-col {
	border-radius: 4px;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
